<template>
	<view class="">
		<view class="dis_pa" v-for="(item,index) in 4" :key="index">
			<view class="dis_al">
				<view class="dis_al_top">
					<image class="dis_al_img" src="@/static/peisong.png"></image>
					<view class="dis_al_r">
						<view class="dis_al_rsp">商铺名/用户昵称</view>
						<view class="dis_al_mc">商品名称</view>
						<view class="dis_al_mc">商品数量</view>
						<view class="dis_al_mc">赠送数量</view>
						<view class="dis_al_mc">配送时间</view>
					</view>
				</view>
				<view class="dis_al_phone">收货电话:17614035858号</view>
				<view class="dis_al_address">配送地址:辽宁省沈阳市铁西区金尚路30号</view>
			</view>
		</view>
		<view class="fhd_top" @click="goPoint">
			<view class="fhd_btn">发货点</view>
		</view>
		<view class="dc_top">
			<view class="dc_btn">导出</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			goPoint(){
				uni.navigateTo({
					url:'/pages/me/point'
				})
			}
		}
	}
</script>

<style>
	page{
		background:#F4F5F7;
		padding-bottom: 180rpx;
	}
</style>
<style scoped lang="scss">
	.dis_pa{
		padding: 20rpx 20rpx 0rpx 20rpx;
		position: relative;
		.dis_al{
			padding: 30rpx;
			border-radius: 10rpx;
			background: #FFF;
			.dis_al_top{
				display: flex;
				.dis_al_img{
					width: 220rpx;
					height: 220rpx;
					margin-right:30rpx;
				}
				.dis_al_r{
					height: 220rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.dis_al_rsp{
						width: 400rpx;
						height: 42rpx;
						font-size: 30rpx;
						font-weight: 500;
						line-height: 42rpx;
						color: #383838;
						overflow:hidden;
						text-overflow:ellipsis; 
						white-space:nowrap;
					}
					.dis_al_mc{
						width: 400rpx;
						height: 42rpx;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 42rpx;
						color: #383838;
						overflow:hidden;
						text-overflow:ellipsis; 
						white-space:nowrap;
					}
				}
			}
			.dis_al_phone{
				width: 600rpx;
				height: 35rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 42rpx;
				color:#9A9A9A;
				overflow:hidden;
				text-overflow:ellipsis; 
				white-space:nowrap;
				margin-bottom: 10rpx;
			}
			.dis_al_address{
				width: 600rpx;
				height: 35rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 42rpx;
				color:#9A9A9A;
				overflow:hidden;
				text-overflow:ellipsis; 
				white-space:nowrap;
				margin-bottom: 10rpx;
			}
		}
	}
	.fhd_top{
		position: fixed;
		right: 0;
		bottom: 240rpx;
		margin: 30rpx 20rpx 0rpx 0rpx;
		.fhd_btn{
			width: 167rpx;
			height: 64rpx;
			border-radius: 32rpx;
			background: #E93E30;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 39px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.dc_top{
		position: fixed;
		bottom:80rpx;
		width: 100%;
		padding: 0rpx 37rpx;
		.dc_btn{
			height: 88rpx;
			border-radius: 44rpx;
			background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44rpx;
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>